<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="WEB-INF/jsp/insertBook.jsp"/>
<html>
<head>
    <meta charset="utf-8"/>
    <title>图书管理</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <link rel="stylesheet" href="/layui/css/layui.css" media="all"/>

    <script src="/layui/layui.js" charset="utf-8"></script>
</head>
<%
    if (session.getAttribute("manager") == null) {
        response.sendRedirect("index.jsp");
    }
%>
<body>
<blockquote class="layui-elem-quote">图书管理
    <a style="color: #ff5722; float: right; margin-right: 50px; font-size: x-large" href="index.jsp">退出登录</a>
</blockquote>
<%
    String msg = (String) request.getAttribute("result");
    if (msg != null) {
%>
<script>
    layui.use('layer', function () {
        const layer = layui.layer;
        const msg = "<%=msg%>";
        if (msg === "成功添加一本图书") {
            layer.msg(msg, {icon: 6});
        } else {
            layer.msg(msg, {icon: 5});
        }

    });
</script>
<%}%>

<div class="layui-container">
    <div class="layui-row">
        搜索图书：
        <div class="layui-inline">
            <input class="layui-input" name="id" id="demoReload" autocomplete="off">
        </div>
        <button class="layui-btn s" data-type="reload">搜索</button>
    </div>
    <div class="layui-row">
        <div class="layui-col-md12">
            <table id="demo" lay-filter="test"></table>
        </div>

    </div>
</div>


<%--table--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-group">
        <button
                type="button"
                class="layui-btn layui-btn-normal"
                lay-event="add"
        >
            <i class="layui-icon">&#xe654;</i>增加
        </button>
        <button type="button" class="layui-btn layui-btn-danger">
            <i class="layui-icon ">&#xe640;</i>删除
        </button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
    >删除</a
    >
</script>

<script>
    layui.use(['jquery', 'table', 'layer', 'form'], function () {
        const table = layui.table;
        const layer = layui.layer;

        //表格start
        table.render({
            elem: "#demo",
            height: 530,
            url: "/ShowBooksServlet?state=showAll", //数据接口
            method:'POST',
            toolbar: "#toolbarDemo", //开启头部工具栏，并为其绑定左侧模板
            page: true, //开启分页
            cols: [
                [
                    //表头
                    {type: "checkbox"},
                    {field: "name", title: "图书名", width: 200},
                    {field: "price", title: "价格", width: 100, sort: true},
                    {field: "writer", title: "作者", width: 100, sort: true},
                    {field: "classify", title: "分类", width: 100, sort: true},
                    {field: "state", title: "借阅状态", width: 150, sort: true},
                    {
                        fixed: "right",
                        title: "操作",
                        toolbar: "#barDemo",
                        width: 80,
                    },
                ],
            ],
            id: 'testReload'
        });

        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        key: {
                            id: demoReload.val()
                        }
                    }
                }, 'data');
            }
        };

        $('.layui-row .s').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听行工具事件
        table.on("tool(test)", function (obj) {
            if (obj.event === "del") {
                layer.confirm("真的要删除这个图书么", function (index) {

                    const id = obj.data.id;
                    $.ajax({
                        url: "/deleteBook?id=" + id,
                        type: "POST",
                        success: function (msg) {
                            if (msg) {
                                //删除这一行
                                obj.del();
                                //关闭弹框
                                layer.msg("删除成功", {icon: 6});
                            } else {
                                layer.msg("删除失败", {icon: 5});
                            }
                        },
                        error: function () {
                            layer.msg("删除失败", {icon: 5});
                        }
                    });
                    layer.close(index);
                });
            }
        });
        table.on("toolbar(test)", function (obj) {
            if (obj.event === "add") {
                layer.open({
                    type: 1,
                    title: '添加图书',
                    skin: 'layui-layer-molv',
                    area: ['500px'],
                    content: $('#insert-layer')
                });
            } else {
            }
        });
    });
</script>
</body>
</html>
